<template>
    <div class="shopping-cart">
      <h2>购物车</h2>
      <el-table :data="cartItems">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
       
      </el-table>
      <el-button type="danger" @click="clearCart">清空购物车</el-button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const cartItems = ref([
    { id: 1, name: '有机蔬菜', price: 39.9,  },
    { id: 2, name: '生态大米', price: 59.9,  }
  ])
  </script>
  
  <style scoped>
  .shopping-cart {
    padding: 20px;
  }
  
  .el-table {
    margin-top: 20px;
  }
  </style>